<template>
  <div>
    <RlForm  :model="model" :rules="rules" ref="ruleFormRef">
      <RlFormItem label="email" prop="email">
        <RlInput v-model="model.email"></RlInput>
      </RlFormItem>
      <RlFormItem label="password" prop="password">
        <RlInput type="password" v-model="model.password" show-password></RlInput>
      </RlFormItem>
      <RlFormItem label="confirmPwd" prop="confirmPwd">
        <RlInput type="password" v-model="model.confirmPwd" show-password></RlInput>
      </RlFormItem>
      <RlFormItem>
        <RlButton type="primary" @click.prevent="submit">Submit</RlButton>
        <RlButton @click.prevent="reset">Reset</RlButton>
      </RlFormItem>
    </RlForm>
  </div>
</template>

<script setup lang="ts">
import RlForm from '@/components/Form/Form.vue'
import RlFormItem from '@/components/Form/FormItem.vue'
import RlButton from '@/components/Button/Button.vue'
import RlInput from '@/components/Input/Input.vue'
import { reactive, ref } from 'vue'
import type { FormRules } from '@/components/Form/types'
defineOptions({
  name:'FormView'
})
const ruleFormRef = ref()
const model = reactive({
  email: '123',
  password: '12',
  confirmPwd: '12'
})
const rules:FormRules = {
  email: [{type:'email', required:true, message: '请输入正确的邮箱地址',trigger: 'blur'}],
  password: [{type:'string',required:true, min: 6, max: 12,message: '密码长度应在 6 到 12 位之间',trigger: 'blur'}],
  // confirmPwd: [{validator:(rule, value) => value === model.password,message:'两个密码必须相同',trigger:'blur'}],
  confirmPwd: [{type:'string',required:true},{
    validator:(rule, value) => value === model.password, message:'两个密码必须相同',trigger:'blur'}],
}
const submit = async()=>{
  try{
    await ruleFormRef.value.validate()
    console.log('passed');
  }catch(e){
    console.log('the error',e);
  }
}
const reset = ()=>{
  // ruleFormRef.value.resetFields()    //恢复默认值并清除报错
  ruleFormRef.value.clearValidate()     //仅清除报错
}
</script>